<template>
  <div class="invoice">
    <div class="top-container">
      <div class="filter-container">
        <el-form ref="filterForm" :model="filterForm" :rules="rules" inline size="small">
          <el-form-item prop="orderType" label="订单类型：">
            <el-select v-model="filterForm.orderType" clearable>
              <el-option label="全部" value="all" />
              <el-option v-for="(val,key) in $store.getters.orderType" :key="key" :label="val" :value="key" />
            </el-select>
          </el-form-item>

          <el-form-item prop="fapiaoSts" label="申领状态：">
            <el-select v-model="filterForm.fapiaoSts" clearable>
              <el-option label="全部" value="all" />
              <el-option v-for="(val,key) in invoiceStatus" :key="key" :label="val" :value="key" />
            </el-select>
          </el-form-item>
          <el-form-item prop="memberPhone" label="购方手机：">
            <el-input v-model="filterForm.memberPhone" clearable />
          </el-form-item>
          <el-form-item prop="customerName" label="购方昵称：">
            <el-input v-model="filterForm.customerName" clearable />
          </el-form-item>
          <el-form-item prop="title" label="发票抬头：">
            <el-input v-model="filterForm.title" clearable />
          </el-form-item>
          <el-form-item prop="orderNo" label="订单编号：">
            <el-input v-model="filterForm.orderNo" clearable />
          </el-form-item>
          <el-form-item prop="fapiaoDaiMa" label="发票代码：">
            <el-input v-model="filterForm.fapiaoDaiMa" clearable />
          </el-form-item>
          <el-form-item prop="fapiaoHaoMa" label="发票号码：">
            <el-input v-model="filterForm.fapiaoHaoMa" clearable />
          </el-form-item>
          <div>
            <el-form-item>
              <el-button type="primary" round @click="fetchData">查询</el-button>
              <el-button round @click="reset">重置</el-button>

            </el-form-item>
          </div>
          <div>
            <el-button size="small" icon="el-icon-upload2" @click="downExcel">导出</el-button>
          </div>
        </el-form>
      </div>
    </div>

    <div class="table-container app-main-content-box">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.6)"
        header-align="left"
        max-height="800px"
        border
        stripe
      >
        <el-table-column prop="memberPhone" label="购方手机号" width="120" show-overflow-tooltip />
        <el-table-column prop="customerName" label="购方昵称" width="120" show-overflow-tooltip />
        <el-table-column prop="typeZh" label="订单类型" />
        <el-table-column prop="orderNo" label="编号" width="200" show-overflow-tooltip />
        <el-table-column prop="fapiaoDaima" label="发票代码" width="200" show-overflow-tooltip />
        <el-table-column prop="fapiaoHaoma" label="发票号码" width="200" show-overflow-tooltip />
        <el-table-column prop="fapiaoAmt" label="发票金额/元" width="100" />
        <el-table-column prop="titleTypeZh" label="发票类型" />
        <el-table-column prop="email" label="电子邮箱" width="160" show-overflow-tooltip />
        <el-table-column prop="title" label="开票抬头" width="160" show-overflow-tooltip />
        <el-table-column prop="taxNum" label="纳税号" width="160" show-overflow-tooltip />
        <el-table-column prop="phone" label="电话号码" width="120" show-overflow-tooltip />
        <el-table-column prop="companyAddress" label="单位地址" width="200" show-overflow-tooltip />
        <el-table-column prop="bankName" label="开户银行" width="120" show-overflow-tooltip />
        <el-table-column prop="bankAccount" label="银行账户" width="160" show-overflow-tooltip />
        <el-table-column prop="remark" label="备注信息" width="160" show-overflow-tooltip />
        <el-table-column prop="fapiaoStsZh" label="状态" fixed="right" width="100">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;">
              <el-tag :type="tagMap[scope.row.fapiaoSts]">{{ scope.row.fapiaoStsZh }}</el-tag>
							<el-tooltip v-if="scope.row.fapiaoSts===3" popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
								<div slot="content">{{scope.row.chnBackMsg}}</div>
								<i class="el-icon-question" style="margin-top: 8px;margin-left: 8px;" />
							</el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" width="210" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="exportData(scope.row)">导出</el-button>
            <el-button type="text" size="small" @click="orderDetail(scope.row)">订单</el-button>
            <el-button v-if="scope.row.fapiaoSts!==3 && scope.row.fapiaoSts!==2" type="text" size="small" @click="viewInvoice(scope.row)">查看发票</el-button>
            <el-button v-if="scope.row.fapiaoSts===1" type="text" size="small" @click="invoiceReversal(scope.row)">手工冲红</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination-direction
        v-if="paginationConfig.total !== 0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
    </div>
    <el-dialog
      title="手工冲红"
      :visible.sync="dialogVisible"
      width="480px"
      center
    >
      <div slot="title" class="header-title" style="display:flex;align-items: center;justify-content: center;">
        <span class="title-name"><i class="el-icon-question" style="color: #ffb72f;margin-right:4px;font-size:18px" /></span>
        <span class="title-age">手工冲红提示</span>
      </div>
      <el-form
        ref="textareaForm"
        :model="textareaForm"
        :rules="textareaFormRules"
        inline
        label-width="60px"
        size="small"
      >
        <div style="width:100%;display:flex;flex-direction: column;align-items: center;margin-bottom:20px">
          <span style="display:block">顾客可能已经报销</span>
          <span style="display:block">确定要<i style="color: #F56C6C;font-style:normal;">冲红</i>该发票:{{ invoiceNo }}？</span>
        </div>
        <el-form-item
          prop="textarea"
          label="原因:"
          class="is-required"
        >
          <el-input
            v-model="textareaForm.textarea"
            type="textarea"
            :rows="6"
            placeholder="请输入原因"
            style="width:330px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { MBSListMixin } from '@/mixin/MBSListMixin'
import { downMallInvoiceList, invoiceReset } from '@/api/invoice'
export default {
  name: 'Invoice',
  components: {},
  mixins: [MBSListMixin],
  data() {
    return {
      loadListAction: {
        list: '/business_admin/receipt/qryFapiaoPageList',
        fieldKey: 'data.list',
        total: 'data.total'
      },
      filterForm: {
        orderType: 'all',
        fapiaoSts: 'all'
      },
      dialogVisible: false,
      invoiceId: null,
      textareaForm: {
        textarea: ''
      },
      textareaFormRules: {
        textarea: [
          { required: true, message: '请输入原因', trigger: 'blur' }
        ]
      },
      invoiceStatus: {
        0: '未开票',
        1: '已开票',
        2: '开票中',
        3: '开票失败',
        4: '冲红中',
        5: '已红中',
        6: '重开中'
      },
      tagMap: {
        0: '',
        1: 'success',
        2: 'warning',
        3: 'danger',
        4: 'warning',
        5: 'danger',
        6: 'warning'
      },
      routerMap: {
        2: 'IncomeHis', // 会员充值
        3: 'IncomeHis', // 预存开卡
        4: 'IncomeHis', // 付费开卡
        5: 'WxaMallOrderManage', // 商城
        6: 'WcyOrderRecord', // 点餐
        7: 'BookingOrderRecord', // 预定
        9: 'IncomeHis', // 赠送会员
        10: 'IncomeHis', // 会员续费(年费缴纳)
        17: 'WxaReservationOrderManage' // 预约
      },
      invoiceNo: null
    }
  },
  methods: {
    orderDetail(data) {
      const routeData = this.$router.resolve({ name: this.routerMap[data.orderType], query: { orderNo: data.orderNo, from: 'invoice' } })
      window.open(routeData.href, '_blank')
    },
    /**
       * 按钮组
       */
    // 导出
    downExcel() {
      this.$refs.filterForm.validate(valid => {
        if (valid) {
          const data = this.fetchFilterParams()
          this.exportFile(data)
        }
      })
    },
    viewInvoice(data) {
      const routeData = this.$router.resolve({ name: 'CheckInvoice', query: { fapiaoJpgUrl: data.fapiaoJpgUrl, fapiaoPdfUrl: data.fapiaoPdfUrl } })
      window.open(routeData.href, '_blank')
    },
    exportData(data) {
      const params = {
        id: data.id
      }
      this.exportFile(params)
    },
    invoiceReversal(data) {
      this.dialogVisible = true
      this.invoiceId = data.id
      this.invoiceNo = data.fapiaoHaoma
      this.$nextTick(() => {
        this.$refs.textareaForm.resetFields()
      })
    },
    exportFile(data) {
      downMallInvoiceList(data).then((res) => {
        if (res.code === 0) {
          this.$alert('数据导出中，请稍后到数据下载中心进行下载', '提示', {
            confirmButtonText: '确定',
            center: true,
            type: 'success'
          })
        }
      })
    },
    handleOk() {
      this.$refs.textareaForm.validate(async(valid) => {
        if (valid) {
          invoiceReset({
            fapiaoId: this.invoiceId,
            redReason: this.textareaForm.textarea
          }).then(res => {
            if (res.code === 0) {
              this.dialogVisible = false
              this.$message.success('提交成功')
            }
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang='scss' scoped>
.top-container {
  padding: 20px 30px 10px;
  border-radius: 5px;
  background-color: #fff;

  .filter-container {
    margin: 10px 0 10px;

    .filter-btn {
      margin-bottom: 20px;
    }

    .el-select {
      width: 400px;
    }

    .el-input {
      width: 400px;
    }

    .el-range-editor {
      width: 100%;
    }

    .el-form-item {
      margin-right: 60px;
    }
  }
}

/* 筛选 */

/* 表格 */
.table-container {
  margin-top: 10px;

  // ::v-deep {
  //   .el-table tr:nth-of-type(odd) td {
  //     border: none;
  //   }

  //   .el-table__row {
  //     td:not(:first-child) {
  //       vertical-align: top;
  //     }
  //   }

  //   .el-table td {
  //     border-bottom: 1px solid #dcdfe6;
  //     font-weight: bold;
  //   }
  // }
}

// .app-main-content-box {
//   .list {
//     height: 72vh;
//     overflow: hidden;
//     overflow-y: auto;
//     scrollbar-width: none; /* firefox */
//     -ms-overflow-style: none; /* IE 10+ */
//     &-item {
//       padding: 10px 0;
//       border-bottom: 1px whitesmoke solid;
//     }
//     &-title {
//       padding: 5px 0;
//       position: relative;
//     }
//     &-title-time {
//       position: absolute;
//       right: 0;
//     }
//   }
//   .list::-webkit-scrollbar {
//     display: none; /* Chrome Safari */
//   }
//   .list-item-message-readed {
//     color: darkgray;
//   }
//   .header {
//     display: flex;
//     .tabs {
//       flex: 1;
//     }
//   }
// }
</style>
